<template>
<el-container class="el-container" direction="vertical">
  <el-row>
    <el-table
      class="order-table"
      :data="tableData"
      border
      v-loading="loading"
      :header-cell-style="{background:'#ebecf0',color:'#000000',fontSize:'12px',fontWeight:'normal'}"
      style="width: 100%">
      <el-table-column
        prop="eventIDs"
        label="项目名称"
        width="500">
        <template slot-scope="scope">
          <el-row style="margin-bottom: 5px">
            <span style="font-size: 12px">订单编号：{{scope.row.orderNum}}</span>
          </el-row>
          <el-row>
            <el-col :span="3">
              <el-image class="detail-img" :src="scope.row.eventInfo.image"></el-image>
            </el-col>
            <el-col :span="21" style="padding-left: 10px">
              <el-row>
                {{scope.row.eventInfo.eventName}}
              </el-row>
              <el-row style="color: #999999; font-size: 12px">
                <span>演出时间：</span>{{scope.row.eventInfo.startTime}}-{{scope.row.eventInfo.endTime}}
              </el-row>
              <el-row style="color: #999999; font-size: 12px">
                <span>演出场馆：</span>{{scope.row.eventInfo.place}}
              </el-row>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column
        prop="seatInfo"
        label="座位信息"
        width="180"
        :align="'center'">
        <template slot-scope="scope">
          <el-row v-for="item in scope.row.seatInfo" :key="item">{{item}}</el-row>
        </template>
      </el-table-column>
      <el-table-column
        prop="ticketCount"
        label="票品张数"
        :align="'center'">
      </el-table-column>
      <el-table-column
        prop="ticketPrice"
        label="订单金额"
        :align="'center'">
        <template slot-scope="scope">
          ￥ {{toDecimal2(scope.row.ticketPrice)}}
        </template>
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态"
        :align="'center'">
      </el-table-column>
      <el-table-column
        prop="creatTime"
        label="创建时间"
        :align="'center'"
      width="100px">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100"
        align="center">
        <template slot-scope="scope">
          <el-button class="btn-front" type="info" size="mini" plain v-if="refundShow(scope.row)"
                     @click="openAckRefund(scope.row)">退 款
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row class="wx">
      <el-pagination
        class="pagination"
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
        :page-size="pageSize">
      </el-pagination>
    </el-row>
  </el-row>
  <el-dialog
    title="提示"
    :visible.sync="visible"
    v-loading="dialogLoading"
    width="30%">
    <span>您正在对订单编号[{{dialogInfo.orderNum}}]进行退款，确定要退款？</span>
    <span slot="footer" class="dialog-footer">
    <el-button @click="visible = false">取 消</el-button>
    <el-button type="primary" @click="refund(dialogInfo.row)">确 定</el-button>
  </span>
  </el-dialog>
</el-container>
</template>

<script>
export default {
  name: 'Order',
  created () {
    this.getTickets()
  },
  data () {
    return {
      total: 0,
      pageSize: 10,
      curPage: 1,
      loading: true,
      dialogLoading: false,
      visible: false,
      tableData: [],
      dialogInfo: {
        orderNum: '',
        row: {}
      }
    }
  },
  methods: {
    getTickets () {
      let _this = this
      _this.loading = true
      this.$axios({
        url: '/api/tickets?userID=' + _this.getUserID() + '&page=' + this.curPage + '&pageSize=' + this.pageSize,
        method: 'get',
        headers: {
          'Content-Type': 'application/json; charset=utf-8',
          'token': _this.getToken()
        }
      }).then((response) => {
        if (response.data.code === 1) {
          _this.tableData = response.data.data.rows
          _this.total = response.data.data.total
          _this.loading = false
        } else {
          _this.isTokenExpired(_this, response.data.msg)
          this.err(response.data.msg)
        }
      })
    },
    handleCurrentChange (val) {
      this.curPage = val
      this.loading = true
      this.getTickets()
    },
    openAckRefund (row) {
      this.visible = true
      this.dialogInfo.orderNum = row.orderNum
      this.dialogInfo.row = row
    },
    refund (row) {
      let _this = this
      _this.dialogLoading = true
      this.$axios({
        url: '/api/tickets/' + row.ticketIDs[0],
        method: 'delete',
        headers: {
          'Content-Type': 'application/json; charset=utf-8',
          'token': _this.getToken()
        }
      }).then((response) => {
        if (response.data.code === 1) {
          this.success('退票成功!')
          this.getTickets()
          this.visible = false
          _this.dialogLoading = false
        } else {
          _this.isTokenExpired(_this, response.data.msg)
          this.err(response.data.msg)
          _this.dialogLoading = false
        }
      })
    },
    refundShow (row) {
      return this.isSaleDeadlineDate(row.eventInfo.startTime) && row.status === '生效'
    }
  }
}
</script>

<style scoped>
.el-container{
  width: 80%;
  margin: 0 auto;
}
.order-table{
  margin-top: 20px;
}

/* 修改表格悬停颜色 */
/deep/ .el-table--enable-row-hover .el-table__body tr:hover>td{
  background-color: transparent !important;
}

.pagination{
  margin-top: 20px;
}
</style>
